<template>
	<view>
		<!-- 顶部栏 -->
		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]" style="padding-top: 20upx;">
			<text class="cuIcon-back" style="margin-left: 10upx;" @click="goBack"></text>
			<view class="cu-item action" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index"
			 @tap="tabSelect" :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>

		<!-- 全部订单 -->
		<block v-if="TabCur==0">
			<view v-if="allOrderList.length!=0" v-for="(item,index) in allOrderList" :key="index" style="margin-top: 20upx;"
			 class="bg-white padding">
				<!-- 第一行 -->
				<view class="flex justify-between padding align-center">
					<view class="text-bold black text-lg">老王水果店</view>
					<view>
						<view v-if="item.status==0" class="text-orange">待付款</view>
						<view v-if="item.status==1" class="text-orange">待评价</view>
						<view v-if="item.status==2" class="text-orange">
							<image style="width: 100upx;height: 100upx;" src="../../static/icon/finish.png"></image>
						</view>
					</view>
				</view>
				<!-- 第二行 -->
				<view  v-for="(item2,index2) in item.orderItem" :key="index2">
					<view class="flex align-center" style="border-bottom:#DDDDDD dashed 3upx; margin-top: 30upx;">
						<!-- 图片 -->
						<view>
							<image mode="widthFix" style="width: 200upx;" :src="item2.skuPic"></image>
						</view>
						<view class="flex flex-direction">
							<!-- 标题 -->
							<view class="text-content" style="margin-left: 20upx;margin-right: 100upx;">{{item2.skuName}}</view>
							<view class="padding-lg">
								<!-- 价格 -->
								<view>价格：￥{{item2.price}}</view>
								<!-- 数量 -->
								<view>数量：{{item2.skuQuantity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 第三行 -->
				<view class="justify-around text-right" style="margin-left: 70upx;margin-top: 20upx;">
					<view>
						<view v-if="item.status==0"><text class="cu-tag line-orange round" @tap="goPay(item.orderItem[0].orderId)">去支付</text></view>
						<view v-if="item.status==1">
							<text class="cu-tag line-orange round" @tap="goRate(item.orderItem[0])">去评价</text>
						</view>
						<view v-if="item.status==2">
							<text class="cu-tag line-orange round" @tap="buyAgain(item.orderItem)">再次购买</text>
						</view>
					</view>
				</view>
			</view>
			<view  v-if="allOrderList.length == 0" class="nocart flex flex-direction">
				<view style="margin-top: 180upx;line-height: 80upx;font-size: 200%;">暂无订单,<text class="text-orange" @tap="goMarket">随便逛逛></text></view>
			</view>
		</block>

		<!-- 待付款 -->
		<block v-if="TabCur==1">
			<view v-if="noPayList.length!=0" v-for="(item,index) in noPayList" :key="index" style="margin-top: 20upx;" class="bg-white padding">
				<!-- 第一行 -->
				<view class="flex justify-between padding align-center">
					<!-- <view>
							<image src="../../static/icon/store.png"style="width: 50upx; height: 50upx; "/>
					</view> -->
					<view class="text-bold black text-lg">
						老王水果店</view>
					<view class="text-orange">待付款</view>
				</view>
				<!-- 第二行 -->
				<view class="flex" @tap="orderLife(0,item2.orderId)" v-for="(item2,index2) in item.orderItem" :key="index2">
					<view class="flex align-center justify-between" style="border-bottom:#DDDDDD dashed 3upx; margin-top: 30upx;">
						<!-- 图片 -->
						<view>
							<image mode="widthFix" style="width: 200upx;" :src="item2.skuPic"></image>
						</view>
						<view class="flex flex-direction">
							<!-- 标题 -->
							<view class="text-content" style="margin-left: 20upx;margin-right: 100upx;">{{item2.skuName}}</view>
							<view class="padding-lg">
								<!-- 价格 -->
								<view>价格：￥{{item2.price}}</view>
								<!-- 数量 -->
								<view>数量：{{item2.skuQuantity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 第三行 -->
				<view class="justify-end flex" style="margin-right: 10upx;margin-top: 20upx;">
					<text class="cu-tag line-black round">查看发票</text>
					<text class="cu-tag line-black round">修改订单</text>
					<text class="cu-tag line-orange round" @tap="cancelOrder(item.orderItem[0].orderId)">取消订单</text>
					<text class="cu-tag line-orange round" @tap="goPay(item.orderItem[0].orderId)">去支付</text>
				</view>
			</view>
			<view  v-if="noPayList.length == 0" class="nocart flex flex-direction">
				<view style="margin-top: 180upx;line-height: 80upx;font-size: 200%;">暂无订单,<text class="text-orange" @tap="goMarket">随便逛逛></text></view>
			</view>
		</block>

		<!-- 待评价 -->
		<block v-if="TabCur==2">
			<view v-if="noRateList.length!=0" v-for="(item,index) in noRateList" :key="index" style="margin-top: 20upx;" class="bg-white padding">
				<!-- 第一行 -->
				<view class="flex justify-between padding align-center">
					<view class="text-bold black text-lg">老王水果店</view>
					<view class="text-orange">
						<text class="cu-tag line-orange round">待评价</text>
					</view>
				</view>
				<!-- 第二行 -->
				<view class="flex" @tap="orderLife(1,item2.orderId)" v-for="(item2,index2) in item.orderItem" :key="index2">
					<view class="flex align-center justify-between" style="border-bottom:#DDDDDD dashed 3upx; margin-top: 30upx;">
						<!-- 图片 -->
						<view>
							<image mode="widthFix" style="width: 200upx;" :src="item2.skuPic"></image>
						</view>
						<view class="flex flex-direction">
							<!-- 标题 -->
							<view class="text-content" style="margin-left: 20upx;margin-right: 100upx;">{{item2.skuName}}</view>
							<view class="padding-lg">
								<!-- 价格 -->
								<view>价格：￥{{item2.price}}</view>
								<!-- 数量 -->
								<view>数量：{{item2.skuQuantity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 第三行 -->
				<view class="justify-end flex" style="margin-right: 10upx;margin-top: 20upx;">
					<text class="cu-tag line-black round">退换/售后</text>
					<text class="cu-tag line-black round">卖了换钱</text>
					<text class="cu-tag line-orange round" @tap="buyAgain(item.orderItem)">再次购买</text>
					<text class="cu-tag line-orange round" @tap="goRate(item.orderItem[0])">立即评价</text>
				</view>
			</view>
			<view  v-if="noRateList.length == 0" class="nocart flex flex-direction">
				<view style="margin-top: 180upx;line-height: 80upx;font-size: 200%;">暂无订单,<text class="text-orange" @tap="goMarket">随便逛逛></text></view>
			</view>
		</block>

		<!-- 已完成 -->
		<block v-if="TabCur==3">
			<view v-if="rateList.length != 0" v-for="(item,index) in rateList" :key="index" style="margin-top: 20upx;" class="bg-white padding">
				<!-- 第一行 -->
				<view class="flex justify-between padding align-center">
					<view class="text-bold black text-lg">老王水果店</view>
					<view class="text-orange">
						<image style="width: 100upx;height: 100upx;" src="../../static/icon/finish.png"></image>
					</view>
				</view>
				<!-- 第二行 -->
				<view class="flex" @tap="orderLife(2,item2.orderId)" v-for="(item2,index2) in item.orderItem" :key="index2">
					<view class="flex align-center justify-between" style="border-bottom:#DDDDDD dashed 3upx; margin-top: 30upx;">
						<!-- 图片 -->
						<view>
							<image mode="widthFix" style="width: 200upx;" :src="item2.skuPic"></image>
						</view>
						<view class="flex flex-direction">
							<!-- 标题 -->
							<view class="text-content" style="margin-left: 20upx;margin-right: 100upx;">{{item2.skuName}}</view>
							<view class="padding-lg">
								<!-- 价格 -->
								<view>价格：￥{{item2.price}}</view>
								<!-- 数量 -->
								<view>数量：{{item2.skuQuantity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 第三行 -->
				<view class="justify-end flex" style="margin-right: 10upx;margin-top: 20upx;">
					<text class="cu-tag line-black round">退换/售后</text>
					<text class="cu-tag line-black round">卖了换钱</text>
					<text class="cu-tag line-orange round" @tap="buyAgain(item.orderItem)">再次购买</text>
				</view>
			</view>
			<view  v-if="rateList.length == 0" class="nocart flex flex-direction">
				<view style="margin-top: 180upx;line-height: 80upx;font-size: 200%;">暂无订单,<text class="text-orange" @tap="goMarket">随便逛逛></text></view>
			</view>
		</block>

		<!-- 已取消 -->
		<block v-if="TabCur==4">
			<view v-if="cancelList.length!=0" v-for="(item,index) in cancelList" :key="index" style="margin-top: 20upx;" class="bg-white padding">
				<!-- 第一行 -->
				<view class="flex justify-between padding align-center">
					<view class="text-bold black text-lg">老王水果店</view>
				</view>
				<!-- 第二行 -->
				<view class="flex" @tap="orderLife(3,item2.orderId)" v-for="(item2,index2) in item.orderItem" :key="index2">
					<view class="flex align-center justify-between" style="border-bottom:#DDDDDD dashed 3upx; margin-top: 30upx;">
						<!-- 图片 -->
						<view>
							<image mode="widthFix" style="width: 200upx;" :src="item2.skuPic"></image>
						</view>
						<view class="flex flex-direction">
							<!-- 标题 -->
							<view class="text-content" style="margin-left: 20upx;margin-right: 100upx;">{{item2.skuName}}</view>
							<view class="padding-lg">
								<!-- 价格 -->
								<view>价格：￥{{item2.price}}</view>
								<!-- 数量 -->
								<view>数量：{{item2.skuQuantity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 第三行 -->
				<view class="justify-end flex" style="margin-right: 10upx;margin-top: 20upx;">
					<text class="cu-tag line-orange round" @tap="buyAgain(item.orderItem)">再次购买</text>
				</view>
			</view>
			<view  v-if="cancelList.length == 0" class="nocart flex flex-direction">
				<view style="margin-top: 180upx;line-height: 80upx;font-size: 200%;">暂无订单,<text class="text-orange" @tap="goMarket">随便逛逛></text></view>
			</view>
		</block>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				tabNav: ['全部', '待付款', '待评价', '已完成', '已取消'],
				userInfo: {},
				//------------------------------------
				allOrderList: [],
				noPayList: [],
				noRateList: [],
				rateList: [],
				cancelList: []
			};
		},
		onLoad(options) {
			// 默认跳转Tab项设置
			this.TabCur = options.type
			this.hasLogin()
		},
		methods: {
			hasLogin() {
				var that = this
				uni.getStorage({
					key: 'userInfo',
					success(res) {
						that.userInfo = res.data
						that.tabSelect(that.TabCur)
					},
					fail(err) {
						uni.showToast({
							title: '请登录',
							icon: 'none'
						})
					}
				})
			},

			async tabSelect(e) {
				if(e != undefined && e.currentTarget != undefined){
					this.TabCur = e.currentTarget.dataset.id;
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				}else{
					this.TabCur = e
				}
				console.log('this.TabCur', this.TabCur)
				switch (Number(this.TabCur)) {
					case 0:
						this.allOrderList = await this.getOrderList(); // 显示全部
						break;

					case 1:
						this.noPayList = await this.getOrderList(0);   // 0->待付款
						break;

					case 2:
						this.noRateList = await this.getOrderList(1);  //  1-> 待评价
						break;

					case 3:
						this.rateList = await this.getOrderList(2);    // 2->已完成
						break;

					case 4:
						this.cancelList = await this.getOrderList(3);  // 3->已取消
						break;

					default:
						console.log('default');
				}
			},

			// 取消所定订单
			async cancelOrder(orderId) {
				var res = await this.$request({
					url: `cartorder/order/orderStatus/${orderId}/3`,
					params: {},
					type: "GET"
				})
				console.log('res', res)
				if (res.code == 0) {
					uni.showToast({
						title: '提交成功，正在为您取消订单',
						icon: 'none'
					})
				}
			},

			// 去支付
			goPay(orderId) {
				console.log('去支付,orderId is', orderId)
				uni.navigateTo({
					url: `pay?orderId=${orderId}`
				})
			},

			// 再次购买
			buyAgain(orderItem) {
				console.log('再次购买')
				var objList = []
				orderItem.forEach(item => {
					objList.push({
						skuId: item.skuId,
						skuName: item.skuName,
						skuImage: item.skuPic,
						totalPrice: item.price,
						unitPrice: item.price / item.skuQuantity,
						count: item.skuQuantity
					})
				})
				uni.navigateTo({
					url: `../../pages/order/orderDetails?orderInfo=${encodeURIComponent(JSON.stringify(objList))}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
				})
			},

			goRate(item) {
				console.log('立即评价', item)
				uni.navigateTo({
					url: `../goods/comment?memberId=${this.userInfo.id}&orderId=${item.orderId}`
				})
			},

			goMarket() {
					uni.switchTab({
						url: '/pages/goods/goods'
					});
			},
			
			// 请求订单【0->待付款；1->待评价；2->已完成】
			async getOrderList(status) {
				console.log('getOrderList')
				var params = {
					memberId: Number(this.userInfo.id)
				}
				if (status != undefined) {
					params = Object.assign({}, params, {
						'status': status
					})
				}
				var list = []
				var res = await this.$request({
					url: 'cartorder/order/allOrderList',
					params: params,
					type: 'POST'
				})
				console.log('res', res)
				for (let item in res.data) {
					list.push(res.data[item])
				}
				console.log('list', list)
				return list
			},

			goBack() {
				uni.switchTab({
					url: '../my/my'
				})
			},

			orderLife(status, orderId) {
				uni.navigateTo({
					url: `orderLife?status=${status}&orderId=${orderId}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
				})
			}
		}
	}
</script>

<style>
	page {
		padding-top: 45px;
	}

	/* 购物车为空的样式} */
	.nocart {
		text-align: center;
		margin-top: 30vh;
	}

	.nocart .iconfont {
		font-size: 80rpx;
		text-align: center;
	}

	.nocart view {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}

	.nocart {
		text-align: center;
		margin-top: 30vh;
	}

	.nocart .iconfont {
		font-size: 80rpx;
		text-align: center;
	}

	.nocart view {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
</style>
